/*
  学习目标：掌握props传递数据- 函数组件,class组件
  props: 所有标签属性组成的对象
  作用：给组件传递数据
  1. 传递数据：给标签添加属性和值
  2. 接收 - 函数组件- 通过形参接收 props
  3. 接收 - 类组件- 通过 this.props
*/

import React from 'react';

class App extends React.Component {
  state = {
    msg: '我是父组件的msg',
    num: 100,
  };
  render() {
    return (
      <div>
        <Child msg={this.state.msg} num={this.state.num}></Child>
        <Son msg="我是msg" num={500}></Son>
      </div>
    );
  }
}

// 接收 - 函数组件- 通过形参接收 props
function Child(props) {
  console.log('Child -----> ', props);
  return <div>我是child组件 - {props.msg}</div>;
}

// 接收 - 类组件- 通过 this.props
class Son extends React.Component {
  render() {
    console.log('Son -----> ', this.props);
    return <div>我是son组件 - {this.props.msg}</div>;
  }
}

export default App;
